import { memo } from "react";
import { Text, TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
import type {
  ViewStyle,
  TextStyle,
  GestureResponderEvent,
  StyleProp,
  TouchableOpacityProps,
  TextProps
} from "react-native";
import theme from "@/styles/theme";

export type Props = {
  /** 按钮文本 */
  text: string;

  /** 按钮类型 */
  type?: "primary" | "success" | "info" | "warning" | "danger";

  /** 按钮宽度 */
  width?: string | number;

  /** 按钮容器样式 */
  containerStyle?: StyleProp<ViewStyle>;

  /** 是否禁用 */
  disabled?: boolean;

  /** 是否 loading */
  loading?: boolean;

  /** loading 颜色 */
  loadingColor?: string;

  /** loading 大小 */
  loadingSize?: number;

  /** 按钮文本样式 */
  btnTextStyle?: StyleProp<TextStyle>;

  /** 点击事件 */
  onClick?: (event: GestureResponderEvent) => void;

  /** 容器 TouchableOpacity props */
  comtainerProps?: TouchableOpacityProps;

  /** Props */
  textProps?: TextProps;

  /** 按钮左边自定义组件 */
  leftComponent?: () => React.ReactNode;

  /** 按钮右边自定义组件 */
  rightComponent?: () => React.ReactNode;
};

const Btn = (props: Props) => {
  // 按钮样式
  const getBtnStyle = (): ViewStyle => {
    let ret: ViewStyle;
    switch (props.type) {
      case "primary":
        ret = {
          backgroundColor: theme.primary
        };
        break;
      case "info":
        ret = {
          backgroundColor: "#fff",
          borderColor: "#ccc",
          ...styles.baseBorder
        };
        break;
      case "danger":
        ret = { backgroundColor: theme.danger };
        break;
      case "warning":
        ret = { backgroundColor: theme.warn };
        break;
      case "success":
        ret = { backgroundColor: theme.success };
        break;
      default:
        ret = { backgroundColor: "#ccc" };
        break;
    }

    return ret;
  };

  return (
    <TouchableOpacity
      {...props.comtainerProps}
      style={[
        styles.rowBtn,
        getBtnStyle(),
        {
          width: props.width ? props.width : "auto"
        },
        props.containerStyle,
        (props.disabled || props.loading) && { opacity: 0.7 }
      ]}
      onPress={e => {
        if (!props.loading) {
          props.onClick && props.onClick(e);
        }
      }}
      disabled={props.disabled || props.loading}
    >
      {props.leftComponent && props.leftComponent()}
      {props.loading && (
        <ActivityIndicator
          size={props.loadingSize ? props.loadingSize : 14}
          color={props.loadingColor ? props.loadingColor : "#fff"}
        />
      )}
      <Text
        numberOfLines={1}
        ellipsizeMode="tail"
        {...props.textProps}
        style={[
          styles.rowBtnText,
          {
            color: props.type === "info" ? "#000" : "#fff"
          },
          props.btnTextStyle
        ]}
      >
        {props.text}
      </Text>
      {props.rightComponent && props.rightComponent()}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  rowBtn: {
    height: 36,
    paddingLeft: 8,
    paddingRight: 8,
    borderRadius: 6,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    gap: 4
  },
  rowBtnText: {
    fontSize: 12,
    letterSpacing: 1
  },
  baseBorder: {
    borderWidth: 1,
    borderStyle: "solid"
  }
});

export default memo(Btn);
